<template>
	<div class="system-menu-container layout-pd">
		<el-card shadow="hover">
			<div class="system-menu-search mb15">
				<el-button size="default" type="primary" class="mr10" @click="handleSearch"> 查询 </el-button>
				<el-input v-model="searchText" size="default" placeholder="请输入课程或书籍名称" style="max-width: 180px"></el-input>
			</div>

			<!-- 数据展示区域 -->
			<el-row :gutter="20">
				<el-col :span="6" v-for="item in filteredData" :key="item.mid" class="mb20">
					<el-card shadow="hover" :body-style="{ padding: '10px' }" @click="handleView(item)" style="cursor: pointer">
						<img :src="item.cover" alt="电子书封面" style="width: 60%; height: 200px; object-fit: cover; display: block; margin: 0 auto" />
						<h3 class="book-title">{{ item.name }}</h3>
						<p class="book-content">{{ item.contents }}</p>
						<div class="book-footer">
							<span class="book-price">¥{{ item.price.toFixed(2) }}</span>
							<el-button type="primary" size="small" @click.stop="handleBuy(item)">购买</el-button>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</el-card>

		<!-- 详情弹窗 -->
		<el-dialog v-model="dialogVisible" :title="selectedBook?.name" width="700px">
			<div class="book-detail-dialog">
				<img :src="selectedBook?.cover" class="book-cover" alt="封面" />
				<div class="book-info">
					<p><strong>作者：</strong>{{ selectedBook?.author }}</p>
					<p><strong>出版社：</strong>{{ selectedBook?.publisher }}</p>
					<p><strong>简介：</strong>{{ selectedBook?.contents }}</p>
					<p>
						<strong>价格：</strong><span style="color: #f56c6c">¥{{ selectedBook?.price.toFixed(2) }}</span>
					</p>
				</div>
			</div>
			<div class="book-preview">
				<h4>内容预览：</h4>
				<div class="preview-box">
					<p>{{ selectedBook?.preview }}</p>
				</div>
			</div>
			<template #footer>
				<el-button @click="dialogVisible = false">关闭</el-button>
				<el-button type="primary" @click="handleBuy(selectedBook)">购买</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemMenu">
import { ref, onMounted, reactive, computed } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import { ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';

const stores = useRoutesList();
const { routesList } = storeToRefs(stores);

const state = reactive({
	tableData: {
		data: [] as RouteRecordRaw[],
		loading: true,
	},
});
const getTableData = () => {
	state.tableData.loading = true;
	state.tableData.data = routesList.value;
	setTimeout(() => {
		state.tableData.loading = false;
	}, 500);
};

const searchText = ref('');

const bookData = ref([
	{
		mid: 1,
		price: 100.2,
		name: '西游记',
		author: '吴承恩',
		publisher: '中华书局',
		contents: '这是一部白话文小说，讲述孙悟空、唐僧、猪八戒、沙僧西天取经的故事，融合了神话、佛道思想与人性反映。',
		cover: 'https://picsum.photos/id/1015/300/200',
		preview: `第一回 灵根育孕源流出 心性修持大道生。话说自开天辟地以来，三皇治世，五帝定伦。那时，有一仙石，受天地之精，日月之华，历经万载而得灵通，遂化作一石猴。此猴生而通灵，能言善语，跳跃腾挪。后在花果山自立为王，率群猴称雄一方。因不满天庭不理，遂大闹天宫，自号“齐天大圣”，引来玉帝震怒。后被如来佛祖压于五行山下五百年，等待有缘之人来度。

唐朝高僧玄奘受命西天取经，行至五行山，救出孙悟空，并为其取名“孙行者”。孙悟空誓改前非，保护唐僧西行，历经九九八十一难，终达灵山，取得真经，修成正果。

其中孙悟空机智勇敢，猪八戒贪吃好色却又忠诚憨厚，沙和尚沉稳持重，唐僧坚定仁慈，构成了四人性格迥异却互补的团队。这部作品融合了中国传统神话元素与儒释道三家思想，是中国古代神魔小说的巅峰之作。`,
	},
	{
		mid: 2,
		price: 75.5,
		name: '红楼梦',
		author: '曹雪芹',
		publisher: '人民文学出版社',
		contents: '《红楼梦》是中国古代小说的巅峰之作，通过贾宝玉与林黛玉的爱情悲剧，展现封建家族的兴衰与女性命运的无奈。',
		cover: 'https://picsum.photos/id/1025/300/200',
		preview: `满纸荒唐言，一把辛酸泪。都云作者痴，谁解其中味。话说荣宁二府，钟鸣鼎食，富贵之极，皆因贾母之宠而盛。贾宝玉乃贾府中最受宠之孙，自幼含玉而生，性情中人，视礼教为桎梏，独钟情于林黛玉。

林黛玉自江南而来，聪慧孤傲，才思出众，与贾宝玉心灵相通，却因种种世俗羁绊，情路坎坷。黛玉多病多思，终以泪尽而亡。而贾府在盛世繁华的背后早已积弊如山，终在王朝更替、官司连连中走向衰败。

《红楼梦》不仅是爱情小说，更是一部封建社会的百科全书，人物众多，各具神采，尤以“金陵十二钗”描绘出女性在礼教压迫下的悲剧命运。作者以深沉笔力，融入自身家族沉浮之痛，使此书成为千古绝唱。`,
	},
	{
		mid: 3,
		price: 89.9,
		name: '三国演义',
		author: '罗贯中',
		publisher: '岳麓书社',
		contents: '本书描写了魏、蜀、吴三国鼎立时期的政治与战争斗争，是一部历史演义小说，展现智谋与忠义的对决。',
		cover: 'https://picsum.photos/id/1040/300/200',
		preview: `滚滚长江东逝水，浪花淘尽英雄。三国鼎立，风云际会。东汉末年，朝纲不振，宦官专权，群雄割据。黄巾之乱揭开了乱世序幕，刘备、关羽、张飞桃园结义，誓扶汉室。而曹操挟天子以令诸侯，逐步统一北方。

赤壁一战，周瑜借东风火烧曹营，奠定三足鼎立之势。诸葛亮七擒孟获、六出祁山，运筹帷幄；关羽水淹七军、温酒斩华雄，忠义双全；而司马懿韬光养晦，终成晋朝奠基人。

《三国演义》以“尊刘贬曹”为主线，塑造出众多英雄形象，是中国古代历史演义小说的代表之作，堪称“乱世枭雄的浮世绘”。`,
	},
	{
		mid: 4,
		price: 65.0,
		name: '水浒传',
		author: '施耐庵',
		publisher: '人民文学出版社',
		contents: '全书以北宋末年农民起义为背景，描绘了108位梁山好汉揭竿而起的故事，展现了“替天行道”的反抗精神。',
		cover: 'https://picsum.photos/id/1062/300/200',
		preview: `张天师遣将捉妖，误将好汉驱上梁山。话说北宋徽宗年间，朝政腐败，贪官横行，民不聊生。义士林冲、武松、宋江等人因不堪官逼民反，被迫走上反抗之路，聚义梁山泊。

宋江，人称“及时雨”，重情重义，招纳各路英雄。梁山好汉共一百零八人，各具神通，有豹子头林冲、行者武松、花和尚鲁智深、智多星吴用等，结为兄弟，誓为百姓伸冤。

梁山众好汉“替天行道”，劫富济贫，屡破官军。朝廷无计，赦招梁山，令其征讨方腊。众兄弟血战沙场，英雄尽陨，成也招安，败也招安，终归无奈收场。

本书塑造了众多栩栩如生的人物形象，揭示官场黑暗，折射社会矛盾，是中国最早的一部农民起义小说。`,
	},
	{
		mid: 5,
		price: 120.0,
		name: '朝花夕拾',
		author: '鲁迅',
		publisher: '新兴出版社',
		contents: '本书为鲁迅先生回忆童年与青年时期的散文集，文笔清新幽默，情感真挚，处处体现对旧社会的反思。',
		cover: 'https://picsum.photos/id/1001/300/200',
		preview: `鲁迅在《朝花夕拾》中追忆少年往事，如《从百草园到三味书屋》描绘孩提时光的乐趣与启蒙教育的枯燥；《阿长与《山海经》》中，展现对朴实保姆“长妈妈”的复杂情感。

他以冷静笔触写下对社会现象的反思，《藤野先生》讲述其在日本留学期间，遇到尊重中国、真心教学的藤野医师，让他反思民族命运。《范爱农》则通过旧友悲剧命运映射时代的黑暗。

整本书既有对童年趣事的缅怀，也有对沉重现实的批判，体现了鲁迅“以文为刃”的思想锋芒，是近代文学的经典之作。`,
	},
	{
		mid: 6,
		price: 45.8,
		name: '骆驼祥子',
		author: '老舍',
		publisher: '作家出版社',
		contents: '本书讲述了北平一个人力车夫祥子的悲惨命运，揭露了旧社会对劳动人民的压迫与摧残。',
		cover: 'https://picsum.photos/id/1011/300/200',
		preview: `祥子是个来自农村的年轻车夫，他勤劳、正直，有自己的梦想——拥有一辆属于自己的黄包车。他省吃俭用，终于买下一辆新车，不料不久后即被军阀抢走，一切心血毁于一旦。

他又努力积蓄，却再次遭遇不幸。被陷害、失恋、被社会击垮，最终从一个阳光、自强的青年，沦为懒散麻木、堕落颓废的城市底层人物。

老舍以冷峻而朴实的语言，讲述了个人在社会重压下的挣扎和变形，借祥子的悲剧展现北平下层人民的真实生存图景，表现旧社会的无情与人性的异化，是中国现代文学写实主义的典范。`,
	},
]);
bookData.value.forEach((item) => {
	item.cover = new URL(`../../assets/${item.name}.png`, import.meta.url).href;
});

const filteredData = computed(() => {
	if (!searchText.value) return bookData.value;
	return bookData.value.filter((item) => item.name.includes(searchText.value) || item.contents.includes(searchText.value));
});

const handleBuy = (item) => {
	ElMessage.success(`已购买《${item.name}》，价格：¥${item.price.toFixed(2)}`);
};

const handleSearch = () => {
	console.log('搜索内容:', searchText.value);
};

// 详情弹窗
const dialogVisible = ref(false);
const selectedBook = ref(null);
const handleView = (item) => {
	selectedBook.value = item;
	dialogVisible.value = true;
};

onMounted(() => {
	getTableData();
});
</script>

<style scoped>
.book-detail-dialog {
	display: flex;
	gap: 20px;
}

.book-cover {
	width: 180px;
	height: 240px;
	object-fit: cover;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.book-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
	color: #333;
}

.book-preview {
	margin-top: 20px;
}

.preview-box {
	max-height: 200px;
	overflow-y: auto;
	padding: 10px;
	background-color: #f9f9f9;
	border: 1px solid #eee;
	border-radius: 4px;
	font-size: 14px;
	color: #555;
	line-height: 1.6;
}
.book-item {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.book-title {
	margin: 10px 0 5px;
	font-size: 16px;
	color: #333;
}

.book-content {
	flex: 1;
	font-size: 14px;
	color: #666;
	line-height: 1.4;
	margin-bottom: 10px;
}

.book-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
}

.book-price {
	font-size: 16px;
	color: #f56c6c;
	font-weight: bold;
}

.mb20 {
	margin-bottom: 20px;
}
</style>
